<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>公告列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleCreate">发布公告</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中..."
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="ID" width="80">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column width="180px" align="center" label="发布时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column width="120px" align="center" label="发布人">
            <template slot-scope="scope">
              {{ scope.row.publisher }}
            </template>
          </el-table-column>
          <el-table-column width="150px" label="标题">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isTop" type="danger" size="mini" style="margin-right: 5px;">置顶</el-tag>
              <el-tag v-if="scope.row.isUrgent" type="warning" size="mini" style="margin-right: 5px;">紧急</el-tag>
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column label="内容摘要">
            <template slot-scope="scope">
              {{ scope.row.summary }}
            </template>
          </el-table-column>
          <el-table-column width="120px" align="center" label="有效期">
            <template slot-scope="scope">
              {{ scope.row.expireTime }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleView(scope.row)"
              >
                查看
              </el-button>
              <el-button
                v-if="scope.row.publisher === '当前用户'"
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.publisher === '当前用户'"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
</template>

<script>
// import { fetchList, deleteNotice } from '@/api/notice'

export default {
  name: 'NoticeList',
  data() {
    return {
      list: [
        {
          id: 1,
          title: '关于公司年度计划的通知',
          publisher: '张三',
          createTime: '2023-01-01 10:00:00',
          expireTime: '2023-12-31',
          summary: '公司年度计划已经制定完成，请各部门负责人查看并执行。',
          isTop: true,
          isUrgent: true
        },
        {
          id: 2,
          title: '关于部门调整的通知',
          publisher: '李四',
          createTime: '2023-01-02 11:00:00',
          expireTime: '2023-02-28',
          summary: '根据公司发展需要，对部分部门进行调整，详情请查看附件。',
          isTop: false,
          isUrgent: false
        },
        {
          id: 3,
          title: '关于春节放假安排的通知',
          publisher: '当前用户',
          createTime: '2023-01-10 14:00:00',
          expireTime: '2023-02-10',
          summary: '春节放假时间为1月21日至1月27日，共7天。1月28日正常上班。',
          isTop: true,
          isUrgent: false
        },
        {
          id: 4,
          title: '关于系统升级维护的通知',
          publisher: '当前用户',
          createTime: '2023-01-15 09:00:00',
          expireTime: '2023-01-20',
          summary: '系统将于1月18日晚上22:00-次日凌晨2:00进行升级维护，期间系统将不可用。',
          isTop: false,
          isUrgent: true
        }
      ],
      total: 4,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      // 模拟API调用
      setTimeout(() => {
        this.listLoading = false
      }, 1000)
      
      // 实际项目中应该调用API
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleCreate() {
      this.$router.push('/notice/create')
    },
    handleEdit(row) {
      this.$router.push(`/notice/edit/${row.id}`)
    },
    handleView(row) {
      this.$router.push(`/notice/view/${row.id}`)
    },
    handleDelete(row) {
      this.$confirm('确认删除该公告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除操作
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 更新列表
        const index = this.list.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.list.splice(index, 1)
          this.total -= 1
        }
        
        // 实际项目中应该调用API
        // deleteNotice(row.id).then(() => {
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        //   this.getList()
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.pagination-container {
  margin-top: 30px;
}
</style>
